<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route, "ss");
    var map = new maplibregl.Map({
      container: "map",
      style:
        "https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL",
      center: [-100.04, 38.907],
      zoom: 3,
    });
    map.addControl(new maplibregl.NavigationControl());
    // map.addControl(new maplibregl.FullscreenControl());
    this.map = map;
    //地图某图层点击事件,这里是点击了 `ciuntries` 图层触发事件
    map.on("click", "countries", function (e) {
      console.log("点击了countries图层", e);
    });

    map.on("load", () => {
      this.addLayer();
      this.addLine();
      map.loadImage("http://127.0.0.1:9528/3.png", (error, image) => {
        if (error) throw error;
        this.point(
          image,
          {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "Point",
                    coordinates: [116.39742, 39.909],
                  },
                  properties: {
                    description:
                      '<strong>Make it Mount Pleasant</strong><p><a href="http://www.mtpleasantdc.com/makeitmtpleasant" target="_blank" title="Opens in a new window">Make it Mount Pleasant</a> is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
                    icon: "theatre",
                  },
                },
              ],
            },
          }, // 数据
          {
            id: "points",
            type: "symbol",
            source: "point", // 数据来源格式
            layout: {
              "icon-image": "cat", // 图标名称
              "icon-size": 0.25,
            },
          }
        );
      });
      this.addFill();
    });
  },
  data() {
    return {
      map: null,
    };
  },
  methods: {
    point(image, data, Layer) {
      this.map.addImage(Layer.layout["icon-image"], image);
      this.map.addSource(Layer.source, data);
      this.map.addLayer(Layer);
      this.map.on("click", Layer.id, (e) => {
        console.log(e, "图标", e.features);
        const coordinates = e.features[0].geometry.coordinates.slice();
        const description = e.features[0].properties.description;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        new maplibregl.Popup()
          .setLngLat(coordinates)
          .setHTML(description)
          .addTo(this.map);
      });
    },
    fly() {
      this.map.flyTo({
        center: [
          -74.5 + (Math.random() - 0.5) * 10,
          40 + (Math.random() - 0.5) * 10,
        ],
        essential: true, // this animation is considered essential with respect to prefers-reduced-motion
      });
    },
    addLayer() {
      const layers = this.map.getStyle().layers;
      // Find the index of the first symbol layer in the map style
      let firstSymbolId;
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].type === "symbol") {
          firstSymbolId = layers[i].id;
          break;
        }
      }
      this.map.addSource("urban-areas", {
        type: "geojson",
        data: "http://127.0.0.1:9528/ne_50m_urban_areas.geojson",
      });
      this.map.addLayer(
        {
          id: "urban-areas-fill",
          type: "fill",
          source: "urban-areas",
          layout: {},
          paint: {
            "fill-color": "#f08",
            "fill-opacity": 0.4,
          },
          // This is the important part of this example: the addLayer
          // method takes 2 arguments: the layer as an object, and a string
          // representing another layer's name. if the other layer
          // exists in the stylesheet already, the new layer will be positioned
          // right before that layer in the stack, making it possible to put
          // 'overlays' anywhere in the layer stack.
          // Insert the layer beneath the first symbol layer.
        },
        firstSymbolId
      );
    },
    addLine() {
      // https://maplibre.org/maplibre-gl-js/docs/examples/geojson-line/
      this.map.addSource("route", {
        type: "geojson",
        data: {
          type: "Feature",
          properties: {},
          geometry: {
            type: "LineString",
            coordinates: [
              [-122.48369693756104, 37.83381888486939],
              [-122.48348236083984, 37.83317489144141],
              [-122.48339653015138, 37.83270036637107],
              [-122.48356819152832, 37.832056363179625],
              [-122.48404026031496, 37.83114119107971],
              [-122.48404026031496, 37.83049717427869],
              [-122.48348236083984, 37.829920943955045],
              [-122.48356819152832, 37.82954808664175],
              [-122.48507022857666, 37.82944639795659],
              [-122.48610019683838, 37.82880236636284],
              [-122.48695850372314, 37.82931081282506],
              [-122.48700141906738, 37.83080223556934],
              [-122.48751640319824, 37.83168351665737],
              [-122.48803138732912, 37.832158048267786],
              [-122.48888969421387, 37.83297152392784],
              [-122.48987674713133, 37.83263257682617],
              [-122.49043464660643, 37.832937629287755],
              [-122.49125003814696, 37.832429207817725],
              [-122.49163627624512, 37.832564787218985],
              [-122.49223709106445, 37.83337825839438],
              [-122.49378204345702, 37.83368330777276],
            ],
          },
        },
      });
      this.map.addLayer({
        id: "route",
        type: "line",
        source: "route",
        layout: {
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "#888",
          "line-width": 8,
        },
      });
    },
    addFill() {
      this.map.addSource("states", {
        type: "geojson",
        data:
          "http://127.0.0.1:9528/ne_110m_admin_1_states_provinces_shp.geojson",
      });
      // Add a layer showing the state polygons.
      this.map.addLayer({
        id: "states-layer",
        type: "fill",
        source: "states",
        paint: {
          "fill-color": "rgba(200, 100, 240, 0.4)",
          "fill-outline-color": "rgba(200, 100, 240, 1)",
        },
      });

      // When a click event occurs on a feature in the states layer, open a popup at the
      // location of the click, with description HTML from its properties.
      this.map.on("click", "states-layer", (e) => {
        console.log(e, "states-layer", e.features);
        new maplibregl.Popup()
          .setLngLat(e.lngLat)
          .setHTML(`<h1>${e.features[0].properties.name}</h1>`)
          .addTo(this.map);
      });

      // Change the cursor to a pointer when the mouse is over the states layer.
      this.map.on("mouseenter", "states-layer", () => {
        this.map.getCanvas().style.cursor = "pointer";
      });

      // Change it back to a pointer when it leaves.
      this.map.on("mouseleave", "states-layer", () => {
        this.map.getCanvas().style.cursor = "";
      });
    },
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 100%;
}
</style>